import React, { Component } from 'react'
import { Form, Input, Button, Space, Typography } from 'antd';
import { nanoid } from 'nanoid'
import { addUsers } from "../redux/actions/personaction"
import { connect } from "react-redux"
const { Paragraph } = Typography;


const mapState = state => {
    return {
        reduxPerson: state.persons,
        count: state.count
    }
}
const mapDispatch = {
    addUsers
}

class Person extends Component {
    // 创建表单的ref实例
    formRef = React.createRef();
    // 获取表单值
    onFinish = (values) => {
        const personVal = {
            id: nanoid(),
            name: values.name,
            age: values.age
        }
        console.log(personVal);
        console.log(this.props);
        this.props.addUsers(personVal)
    };
    // 重置表单数据
    onReset = () => {
        this.formRef.current.resetFields();
    };
    // 回填表单数据
    onFill = () => {
        this.formRef.current.setFieldsValue({
            name: '张三',
            age: 14
        });
    };

    render() {
        return (
            <div>
                <Form layout={'inline'} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
                    <Form.Item
                        name="name"
                        label="姓名"
                        rules={[
                            {
                                required: true,
                                message: '请输入姓名',
                            },
                        ]}
                    >
                        <Input placeholder='请输入姓名' />
                    </Form.Item>

                    <Form.Item
                        name="age"
                        label="年龄"
                        rules={[
                            {
                                required: true,
                                message: '请输入年龄',
                            },
                        ]}
                    >
                        <Input placeholder='请输入年龄' />
                    </Form.Item>


                    <Form.Item>
                        <Space size='small'>
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                            <Button onClick={this.onReset}>
                                重置
                            </Button>
                            <Button type='primary' onClick={this.onFill}>
                                回填数据
                            </Button>
                            <span>上方组件的和为：{this.props.count}</span>
                        </Space>
                    </Form.Item>
                </Form>

                <Paragraph style={{ "fontSize": "20px", "marginTop": "15px" }}>
                    <ul>
                        {
                            this.props.reduxPerson.map(item => {
                                return (
                                    <li key={item.id}>{item.name}  - {item.age}</li>
                                )
                            })
                        }
                    </ul>
                </Paragraph>

            </div>
        );
    }
}

export default connect(mapState, mapDispatch)(Person)